<template>
    <template v-if="!详情_抽屉式">
        <q-toggle v-model="list.a.编辑否" checked-icon="edit" color="green" unchecked-icon="edit_off" />
    </template>
    <template v-if="详情_抽屉式">
        <q-btn push text-color="primary" label="新增" icon="add" @click="详情_抽屉式.初始化()" />
    </template>
    <template v-else>
        <q-btn push text-color="primary" label="新增" icon="add" @click="list.增()" />
    </template>
    <template v-if="路由.a.页面类型 == '列表'">
        <q-btn push text-color="negative" label="删除" icon="delete" @click="list.删()" :disabled="!list.a.选中组.length" />
    </template>
    <!-- 在位编辑模式 -->
    <template v-if="!详情_抽屉式">
        <q-btn push text-color="primary" label="保存" @click="list.保存" v-if="list.a.变化了">
            <q-badge color="orange" floating v-if="list.a.变化了">变</q-badge>
        </q-btn>
    </template>
    <q-input outlined dense v-model="list.req.多字段搜索关键词" placeholder="关键词……" debounce="800" clearable>
        <template v-slot:append>
            <q-icon name="search" />
        </template>
    </q-input>
    <q-btn-dropdown push v-model="list.筛选.a.显示">
        <template v-slot:label>
            <div class="row items-center no-wrap">
                <q-icon left name="filter_alt" />
                <q-badge color="orange" floating v-if="list.筛选.单项组.length > 0">{{ list.筛选.单项组.length }}</q-badge>
                <div class="text-center">
                    筛选
                </div>
            </div>
        </template>

        <q-list class="min-w-80 q-pa-sm">
            <q-toolbar class="min-h-40px flex-center q-gutter-x-sm">
                <q-btn dense text-color="primary" label="新增" icon="add" @click="list.筛选.增()" />
                <q-btn dense text-color="primary" label="应用" icon="done" @click="list.筛选.保存()" />
                <q-btn dense text-color="negative" label="清除" icon="clear" @click="list.筛选.清除()" />
            </q-toolbar>
            <q-separator spaced />
            <q-item clickable v-for="(item) in list.筛选.单项组">
                <q-item-section top>
                    <div class="row no-wrap">
                        <q-select class="col-4" outlined dense v-model="item.字段名" :options="list.筛选.供筛选字段名s.value"
                            label="字段名" />
                        <q-select class="col-4" outlined dense v-model="item.比较运算符" :options="item.候选比较运算符"
                            label="比较运算符" />
                        <template v-if="item.百分数">
                            <q-input class="w-28" outlined dense v-model.number="item.百分数" placeholder="百分数……"
                                label="?%">
                            </q-input>
                            <q-input outlined dense v-model.number="item.基准数" label="基准数" placeholder="基准数……">
                            </q-input>
                        </template>
                        <template v-else>
                            <q-input outlined dense v-model="item.字段值" placeholder="关键词……">
                            </q-input>
                        </template>
                    </div>
                </q-item-section>
                <q-item-section side>
                    <q-btn class="gt-xs" size="12px" flat dense round icon="clear" @click="list.筛选.删(item)" />
                </q-item-section>

            </q-item>
        </q-list>
    </q-btn-dropdown>
    <q-btn push text-color="primary" :label="路由.a.待切换页面类型" icon="content_paste" @click="list.视图切换()"
        v-if="元件袋.组件.有看板否" />
    <el-dropdown>
        <span class="el-more-filled">其他
            <el-icon>
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="excel.导出excel" icon="download">
                    导出
                </el-dropdown-item>
                <el-dropdown-item>
                    <el-upload action="#" :on-change="excel.导入excel" :multiple="false" accept=".xlsx,.xls"
                        :auto-upload="false">
                        <q-btn flat label="导入" icon="upload" />
                    </el-upload>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
import use路由 from '@/hooks/use路由';
const 路由 = use路由();

const props = withDefaults(defineProps<{
    详情_抽屉式?: Object,
    list: list,
}>(),
    {
    });

const { 单项组, 元件袋 } = props.list
import useexcel from '@/hooks/useexcel';
const excel = useexcel({ 单项组, 元件袋 })

// import use筛选 from '@/hooks/use筛选';
// const 筛选 = use筛选({ 数据单项组: 单项组, 元件袋, 筛选组: props.list.req.筛选组 })

</script>

<style lang="scss" scoped></style>